<template>
	<view class="index container">
		<!-- 账户名称 -->
		<view class="index-header">
			<view class="account-book-name" @click="selectAccountBookFn">
				<text class="name">{{accountBook.name}}</text>
				<uni-icons fontFamily="CustomFont" :size="20">{{'\ue605'}}</uni-icons>
			</view>

			<uni-icons type="person" size="30"></uni-icons>
		</view>

		<!-- 功能图标 -->
		<uni-row class="icon-tool">
			<uni-col :span="6" class="icon-tool-item">
				<uni-icons fontFamily="CustomFont" :size="30"
					@click="()=>goTo('calendarDetail')">{{'\ue613'}}</uni-icons>
				<text class="text">日历</text>
			</uni-col>
			<uni-col :span="6" class="icon-tool-item">
				<uni-icons fontFamily="CustomFont" :size="30" @click="()=>goTo('accountBook')">{{'\ue603'}}</uni-icons>
				<text class="text">账本</text>
			</uni-col>
			<uni-col :span="6" class="icon-tool-item">
				<uni-icons fontFamily="CustomFont" :size="30"
					@click="()=>goTo('assetsManagement')">{{'\ue60c'}}</uni-icons>
				<text class="text">资产</text>
			</uni-col>
			<uni-col :span="6" class="icon-tool-item">
				<uni-icons fontFamily="CustomFont" :size="30" @click="()=>goTo('note')">{{'\ue7ee'}}</uni-icons>
				<text class="text">笔记</text>
			</uni-col>
		</uni-row>
		<!-- 收支统计 -->
		<view class="i-e-s">
			<image class="list-item-image " mode="aspectFill" :src="imageSrc"></image>
			<uni-row class="i-e-s-header">
				<uni-col :span="16"><text class="i-e-s-header-title">
						本月收支统计（元）</text></uni-col>
				<uni-col :span="8" @click="()=>goTo('detail')">
					<text>查看明细 </text>
					<uni-icons type="right" size="20" color="#fff"></uni-icons>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :span="20">总支出</uni-col>
				<uni-col :span="4">
					<uni-icons :type="eyeType" size="30" color="#fff" @click="eyeChange"></uni-icons>
				</uni-col>
			</uni-row>

			<text class="i-e-s-all-out">{{eyeChangeValue(monthIncomeAndExpense.expense)}}</text>
			<view class="i-e-s-all-in">
				<text class="text">总收入
					{{eyeChangeValue(monthIncomeAndExpense.income)}} </text>
				&emsp;|&emsp;
				<text class="text"> 结余
					{{eyeChangeValue(monthIncomeAndExpense.income - monthIncomeAndExpense.expense)}}</text>

			</view>
			<view class="save-btn new" @click="()=>goTo('startKeepingAccounts')">
				<text class="save-btn-text">记一笔 </text>
			</view>
		</view>
		<view class="recent">
			<view class="recent-header">
				<view class="current-week">

					<text class="current-week-text"> 近一周账单</text>
				</view>
				<view class="recent-amount">
					<text class="text text-in">收入 {{eyeChangeValue(weekIn)}}</text>
					<text class="text">支出 {{eyeChangeValue(weekOut)}}</text>
				</view>
			</view>

			<!-- uni-app -->
			<scroll-view scroll-y="true" class="scroll-Y">
				<view class="list-item" v-for="i in detailList" @click="()=>goToDetails(i)">
					<view class="list-item-content">
						<uni-icons :type="i.icon||'wallet'" size="35"></uni-icons>
						<view class="view">
							<view>{{i.categoryName}}</view>
							<view>{{i.newDate}}</view>
						</view>
					</view>
					<view class="view">
						<view :class="moneyClass(i.money)">
							{{( i.money.includes('-')? '':'+') + eyeChangeValue(i.money)}}
						</view>
						<view>{{i.remarks}}</view>
					</view>
				</view>

			</scroll-view>
		</view>
	</view>

	<selectAccountBook :accountName="accountBook.name" ref="selectAccountBookRef"
		@selectAccountBookOk="selectAccountBookOk">
	</selectAccountBook>

</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import selectAccountBook from '@/components/selectAccountBook/selectAccountBook.vue'
	import { accountBookApi, calendarApi } from "@/apis/apis"
	import { onShow } from '@dcloudio/uni-app'
	import { getDate } from '@/utils'
	import { userStore } from '@/store/user'

	/* 	import { getSystemInfo } from '@/utils/system.ts'
		const contentHeight = ref('')
		const sys = getSystemInfo()
		contentHeight.value = sys.contentHeight + 'px'
	 */


	const imageSrc = '../../static/image/account-bg.jpg'

	// 编辑
	const goToDetails = (i : any) => {
		uni.navigateTo({ url: `/pages/detail/details/details?type=${i.money.includes('-') ? 0 : 1}&id=${i.id}` })
	}



	const goTo = (type : string) => {
		if (type === 'detail') return uni.reLaunch({
			url: `/pages/${type}/${type}`
		})
		uni.navigateTo({
			url: `/pages/${type}/${type}`
		})

	}

	// 选择账本
	const selectAccountBookRef = ref(null)

	const selectAccountBookFn = () => {
		if (selectAccountBookRef.value) selectAccountBookRef.value.selectAccountBook()
	}

	const accountBook = ref({
		name: '选择账本',
		id: '',

	})
	// TODO 周收入支出
	const weekIn = ref(0)
	const weekOut = ref(0)
	const detailList = ref([
		/* {
			"id": "1879041888682455043",
			"type": "项资金",
			"money": "666.00",
			"newDate": "2025-02-15 00:00:00",
			"categoryName": "信用卡",
			"remarks": null
		} */
	])

	const monthIncomeAndExpense = ref({
		income: 0,
		expense: 0
	})
	// 获取本月收支统计
	const getMonthIncomeAndExpense = async () => {
		const res : any = await calendarApi.queryUsingGET({ accountBookId: accountBook.value.id, date: getDate('month') })
		monthIncomeAndExpense.value = res.data
	}

	//  账本表-查询明细
	const getIncomeAndExpenseRecords = async (params ?: {}) => {
		const res : any = await accountBookApi.queryPagesUsingGET({
			date: getDate('month'),
			accountBookId: accountBook.value.id,
			...params
		})
		weekIn.value = 0
		weekOut.value = 0
		detailList.value = res.data.records
		detailList.value.forEach(item => {
			try {
				if (item.money.includes('-')) {

					weekOut.value += - -item.money
				} else {
					weekIn.value += - -item.money
				}
			} catch (error) {
				console.log(error);
			}

		})
	}
	// 初始化请求账本
	const getAccountBook = async () => {
		const res : any = await accountBookApi.queryPageUsingPOST({ defaulted: '1' })
		if (res.data.records[0]) {
			accountBook.value.name = res.data.records[0].name
			accountBook.value.id = res.data.records[0].id
			userStore.setCurrentBook(res.data.records[0])
			getMonthIncomeAndExpense()
			getIncomeAndExpenseRecords()
		} else {
			// TODO 没有默认账本就新增账本
			// uni.navigateTo({
			// 	url: `/pages/accountBook/addAccountBook/addAccountBook?defaulted=1`
			// })
		}
	}
	onShow(() => {
		getAccountBook()
	});

	const selectAccountBookOk = (value : any) => {
		accountBook.value = value
	}
	// 隐藏金额
	const moneyClass = (money : string) => money.includes('-') ? 'green' : 'red'

	const eyeType = ref('eye')
	const eyeChange = () => eyeType.value = eyeType.value === 'eye' ? 'eye-slash' : 'eye'

	const eyeChangeValue = (e : string) => eyeType.value === 'eye' ? e : "***"
</script>

<style lang="scss" scoped>
	/* 引入官方安全区CSS */
	@import '@/uni_modules/uni-scss/variables.scss';

	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.custom-navbar {
		height: 44px;
		/* 导航栏内容高度 */
		/* 通过padding-top留出状态栏位置 */
	}

	.content {
		flex: 1;
		overflow: auto;

		/* 顶部安全区 */
		padding-top: constant(safe-area-inset-top);
		padding-top: env(safe-area-inset-top);

		/* 底部安全区 */
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		/* 全面屏适配 */
		min-height: calc(100vh - var(--status-bar-height));
	}

	.index {
		padding: 20px;
		height: 100vh;

		// 账户名称
		.index-header {
			display: flex;
			justify-content: space-between;

			.account-book-name {

				.name {
					font-size: 20px;
					margin-right: 10px;
				}
			}

		}

		// 功能图标
		.icon-tool {
			width: 100%;
			padding-top: 5px;
			height: auto;

			.icon-tool-item {
				line-height: 40px;
				display: flex;
				flex-direction: column;
				text-align: center;

				.text {
					margin-bottom: 10px;
				}
			}

		}

		// 收支统计
		.i-e-s {
			// height: 200px;
			/* 按需设置高度 */
			// margin: 10px auto;
			// flex: 1;
			// height: 234px;
			padding: 15px;
			color: #fff;
			border-radius: 7px;
			/* 关键定位 */
			position: relative;

			/* 防止图片溢出 */
			// overflow: hidden;

			.list-item-image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
			}

			.i-e-s-header {
				margin-bottom: 20px;
				padding-bottom: 20px;

				.i-e-s-header-title {
					font-size: 16px;
				}


			}


			.i-e-s-all-out {
				padding-bottom: 20px;
				font-size: 25px;

			}

			.i-e-s-all-in {
				margin-bottom: 20px;

				.text {
					font-size: 14px;
				}
			}

			.new {
				position: static;
				transform: none;
				margin: 0 auto;
			}
		}

		// 近一周
		.recent {
			width: 96%;
			margin: 10px auto;
			height: calc(100vh - 50px - 30px - 95px - 212px);
			padding-bottom: 20px;

			.recent-header {
				height: 28px;
				padding: 10px 0;
				display: flex;
				justify-content: space-between;

				.current-week {
					width: auto;
					height: 28px;
					text-align: center;
					padding-left: 10px;
					padding-right: 10px;
					background-color: #000;
					border-radius: 37px;

					.current-week-text {
						font-size: 14px;
						color: rgba(255, 255, 255, 1);
						line-height: 28px;

					}

				}

				.recent-amount {
					.text {
						font-size: 14px;
						height: 28px;
						line-height: 28px;
					}

					.text-in {
						margin-right: 20px;
					}
				}

			}

			.scroll-Y {

				height: calc(100% - 28px);

				// 明细列表
				.list-item {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					padding: 10px;
					border-bottom: 1px solid #c6c6c6;


					.list-item-content {
						height: 60px;
						display: flex;
						flex-direction: columns;
						align-items: center;

						.view {
							padding-left: 10px;
						}
					}
				}
			}
		}
	}
</style>